
export class CanvasDraw {
    public canvas: HTMLCanvasElement;
    constructor(width: number, height: number, bgColor: string = '#fff') {
        const canvas = document.createElement('canvas')
        canvas.height = height;
        canvas.width = width;
        canvas.style.backgroundColor = bgColor;
        this.canvas = canvas
    }
    //对外的绘制方法, 外部自定义绘制
    draw(fn: (ctx: CanvasRenderingContext2D) => void): this {
        if (typeof fn === 'function' ) {
            const ctx = this.canvas.getContext('2d')
            fn(ctx);
        }else {
            console.warn('params must be function')
        }
        return this;
    }
    preview(): this {
        const canvas = this.canvas;
        canvas.style.position = 'fixed';
        canvas.style.top = '5%';
        canvas.style.left = '5%';
        document.body.appendChild(this.canvas)
        return this;
    }
}